<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #reg{
            width: 476px;
            height: 585px;
            /*background: #2badce;*/
            margin: 0 auto;
            border: 1px solid #ccc;
            /*position: relative;*/
        }
        #reg .regbody{
            width: 476px;
            height: 523px;
            /*background: red;*/
            /*position: absolute;*/
            /*top: 44px;*/
            padding-top: 62px;
        }
        #reg .regbody .img{
            width: 106px;
            height: 36px;
            display: block;
            margin: 0 auto;
            margin-bottom: 26px;
            vertical-align: bottom;

        }
        #reg .regbody .divtext{
            width: 350px;
            height: 42px;
            font-size: 14px;
            margin:0 auto;
            position: relative;
            padding: 13px 0;
            clear: both;
        }
        #reg .regbody .divtext .text{
            width: 331px;
            height: 36px;
            padding-left:15px;
            border: 2px solid #EBEBEB;
            color: #ccc;
            font-size: 14px;
        }
        .common{
            color: #ccc;
        }
        .mess{
            color: red;
        }
        a{
            text-decoration: none;
            color: orange;
        }
    </style>
</head>
<body>
<div id="reg">
    <div class="regbody">
        <img src="./image/58.png" alt="" class="img">
        <div class="divtext">
            <input type="text" class="text common" onblur="demo(this)" onclick="cl(this)" value="手机号">
            <div id="phone" style="display: none;font-size: 12px;height: 14px"><span style="margin-right:5px;width: 14px;height: 14px;display: inline-block;vertical-align: center "><img src="./image/tan.png" height="14" alt=""></span><span class="mess" style="font-size: 14px">请输入手机号</span></div>
        </div>
        <div class="divtext">
            <input type="text" class="text common" onblur="demo1(this)" onclick="cl(this)" value="动态码">
            <div id="code" style="display: none;font-size: 12px;height: 14px"><span style="margin-right:5px;width: 14px;height: 14px;display: inline-block;vertical-align: center "><img src="./image/tan.png" height="14" alt=""></span><span class="mess" style="font-size: 14px">请输入手机号</span></div>
        </div>
        <div class="divtext">
            <input type="text" class="text common" onblur="demo2(this)" onclick="cl(this)" value="用户名">
            <div id="username" style="display: none;font-size: 12px;height: 14px"><span style="margin-right:5px;width: 14px;height: 14px;display: inline-block;vertical-align: center "><img src="./image/tan.png" height="14" alt=""></span><span class="mess" style="font-size: 14px">请输入手机号</span></div>
        </div>
        <div class="divtext">
            <input type="text" class="text common" onblur="demo3(this)" onclick="cl(this)" value="密码">
            <div id="pass" style="display: none;font-size: 12px;height: 14px"><span style="margin-right:5px;width: 14px;height: 14px;display: inline-block;vertical-align: center "><img src="./image/tan.png" height="14" alt=""></span><span class="mess" style="font-size: 14px">请输入手机号</span></div>
        </div>
        <div class="divtext" >
            <input type="text" class="text common" onblur="demo4(this)" onclick="cl(this)" value="确认密码">
            <div id="notpass" style="display: none;font-size: 12px;height: 14px"><span style="margin-right:5px;width: 14px;height: 14px;display: inline-block;vertical-align: center "><img src="./image/tan.png" height="14" alt=""></span><span class="mess" style="font-size: 14px">请输入手机号</span></div>
        </div>
        <div style="text-align: center;font-size: 14px;margin-top: 20px">注册即同意<a  href="###">《58同城使用协议》</a>& <a href="###">《隐私政策》</a></div>
        <div class="divtext" >
            <input style="cursor: pointer;background: orangered " type="button" class="text common" value="确认">
        </div>
    </div>

</div>
<script>
    function cl(_this) {
        _this.style.color="#000";
        _this.value='';
    }
    function demo(_this) {
        div=document.getElementById('phone');
        if(_this.value===''){
            _this.value='手机号';
            _this.style.color='#ccc';
            div.getElementsByClassName('mess')[0].innerText='请输入手机号';
            div.style.display="block";
        }else if(_this.value.length!==11){
            div.getElementsByClassName('mess')[0].innerText='请输入正确的手机号';
            div.style.display="block";
        }
    }
    function demo1(_this) {
        if(_this.value==='') {
            div = document.getElementById('code');
            _this.value = '动态码';
            _this.style.color = '#ccc';
            div.getElementsByClassName('mess')[0].innerText = '请输入正确的验证码';
            div.style.display = "block";
        }
    }
    function demo2(_this) {
        div=document.getElementById('username');
        _this.value='用户名';
        _this.style.color='#ccc';
        div.getElementsByClassName('mess')[0].innerText='请输入正确的用户名';
        div.style.display="block";
    }
    function demo3(_this) {
        div=document.getElementById('pass');
        if(_this.value===''){
            _this.value='密码';
            _this.style.color='#ccc';
            div.getElementsByClassName('mess')[0].innerText='密码不能为空';
            div.style.display="block";
        }else if(_this.value.length<6||_this.value.length>16){
            div.getElementsByClassName('mess')[0].innerText='密码不能小于6或大于16';
            div.style.display="block";
        }
    }
    function demo4(_this) {
        div=document.getElementById('notpass');
        if(_this.value===''){
            _this.value='确认密码';
            _this.style.color='#ccc';
            div.getElementsByClassName('mess')[0].innerText='密码不能为空';
            div.style.display="block";
        }else if(_this.value.length<6||_this.value.length>16){
            div.getElementsByClassName('mess')[0].innerText='确认密码不能小于6或大于16';
            div.style.display="block";
        }

    }
</script>
</body>
</html>